<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-16 flex v-align-c">
      <span></span>
      <i>知识内容</i>
    </h2>
    <h3 class="pancel-s-title">标题栏设置</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box">
        <h4>样式风格</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-checkbox v-model="details.propMap.isTitleShow" @change="checkboxChange('titleShow', $event)">显示标题栏</el-checkbox>
              <el-input v-model="details.propMap.contentTitle" placeholder="最多4个字" :maxlength="4"></el-input>
              <el-checkbox v-model="details.propMap.isShowMore" @change="checkboxChange('showMore', $event)" :disabled="!details.propMap.isTitleShow">显示查看更多按钮</el-checkbox>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">内容来源</h3>
      </div>
      <div class="border-box">
        <div>
          <template v-if="details.contentList">
            <draggable id="content-box flex-item" v-model="details.contentList" dragable="true" :move="getdata" @update="datadragEnd">
              <div v-for="(item, index) in details.contentList" :key="'carousel-list-' + index">
                <el-form-item class="border-pic-bar carousel-u-bar pad-6">
                  <div class="carousel-u-close" @click="removeCarousel(item)">
                    <i class="el-icon-error" />
                  </div>
                  <div class="flex v-align-c" @click="linkLayer(item)">
                    <img class="width-12 height-10 mar-r-12 mar-l-6" :src="iconDrag" alt="">
                    <div class="flex-item mar-r-10">
                      <div class="mini-sbar-input cursor-p" :style="{color: item.status === 1 ? '#606266' : '#FF0000'}">{{ item.contentName || '已被删除' }}</div>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </draggable>
            <div class="flex pad-b-15" v-if="details.contentList.length < contentLength">
              <el-button class="flex-item" @click="linkLayer">
                <i class="el-icon-plus mar-r-5"></i>添加
                <span class="font-12">{{ details.contentList.length }}/{{ contentLength }}</span>
              </el-button>
            </div>
          </template>          
        </div>
      </div>
    </el-form>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <component-link-layer pageType="110" :link="linkParams" :appType="appType" v-on:selectMoreLink="setLinkTemp" @selectLink="selectSingleLink"></component-link-layer>
      <div slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setLink">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import elDragDialog from '@/directive/el-dragDialog'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import draggable from 'vuedraggable'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        contentLength: 10,
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {
            contentTitle: '',
            isTitleShow: true,
            isShowMore: true
          },
          contentList: []
        },
        linkSetVisible: false,
        link: {},
        linkTemp: {},
        iconDrag
      }
    },
    computed: {
      linkParams() {
        return this.$utils.deepClone(this.link)
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.$set(this.details.propMap, 'isTitleShow', this.details.propMap.titleShow * 1 === 1)
      this.$set(this.details.propMap, 'isShowMore', this.details.propMap.showMore * 1 === 1)
      this.details.contentList = this.details1.contentList
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsContent', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'isTitleShow', details.propMap.titleShow * 1 === 1)
        that.$set(that.details.propMap, 'isShowMore', details.propMap.showMore * 1 === 1)
        that.details.contentList = details.contentList
      })
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.contentList
        for (let a = 0; a < filters.length; a++) {
          filters[a].sortNo = a
        }
        this.details.contentList = filters
      },
      dialogCancel(val) {
        this.linkSetVisible = val
      },
      linkLayer(item = {}) {
        this.link = item
        if (item.contentInfoId) {
          this.link.single = true
        }
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        // 子组件事件监听 返回内容来源列表数据
        Object.assign(this.linkTemp, item)
        console.log(item)
        for (let i = 0; i < item.contentList.length; i++) {
          this.details.contentList.push(item.contentList[i])
        }
        const contentList = this.details.contentList
        this.$delete(this.details, 'contentList')
        this.$set(this.details, 'contentList', contentList)
      },
      selectSingleLink(item) {
        // 子组件事件监听 返回内容来源列表单个数据
        Object.assign(this.link, item)
        this.linkSetVisible = false
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      removeCarousel(content) {
        this.details.contentList.splice(this.details.contentList.findIndex(item => item.contentInfoId === content.contentInfoId), 1)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {
            contentTitle: '',
            isTitleShow: true,
            showMore: '1',
            isShowMore: true,
            titleShow: '1'
          },
          contentList: []
        }
      },
      checkboxChange(prop, val) {
        if (prop === 'titleShow') {
          this.details1.propMap.showMore = val ? '1' : '0'
          this.details.propMap.isShowMore = val
        }
        this.details1.propMap[prop] = val ? '1' : '0'
      }
    }
  }
</script>
